<template>
  <div class="pagination" v-if="totalPages > 1">
    <!-- 上一页 -->
    <button 
      class="page-btn" 
      :disabled="currentPage === 1"
      @click="goToPage(currentPage - 1)"
    >
      <i class="fas fa-chevron-left"></i>
      <span class="btn-text">上一页</span>
    </button>
    
    <!-- 第一页 -->
    <button 
      v-if="showFirstPage"
      class="page-number"
      :class="{ active: currentPage === 1 }"
      @click="goToPage(1)"
    >
      1
    </button>
    
    <!-- 前省略号 -->
    <span v-if="showStartDots" class="dots">...</span>
    
    <!-- 页码列表 -->
    <button 
      v-for="page in displayPages" 
      :key="page"
      class="page-number"
      :class="{ active: currentPage === page }"
      @click="goToPage(page)"
    >
      {{ page }}
    </button>
    
    <!-- 后省略号 -->
    <span v-if="showEndDots" class="dots">...</span>
    
    <!-- 最后一页 -->
    <button 
      v-if="showLastPage"
      class="page-number"
      :class="{ active: currentPage === totalPages }"
      @click="goToPage(totalPages)"
    >
      {{ totalPages }}
    </button>
    
    <!-- 下一页 -->
    <button 
      class="page-btn" 
      :disabled="currentPage === totalPages"
      @click="goToPage(currentPage + 1)"
    >
      <span class="btn-text">下一页</span>
      <i class="fas fa-chevron-right"></i>
    </button>
    
    <!-- 跳转 -->
    <div class="page-jumper" v-if="showJumper">
      <span>跳至</span>
      <input 
        type="number" 
        :min="1" 
        :max="totalPages"
        v-model.number="jumpPage"
        @keyup.enter="jumpToPage"
      />
      <span>页</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    // 当前页码
    currentPage: {
      type: Number,
      default: 1
    },
    // 总页数
    totalPages: {
      type: Number,
      required: true
    },
    // 每次显示的页码数量
    maxVisible: {
      type: Number,
      default: 5
    },
    // 是否显示跳转框
    showJumper: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      jumpPage: this.currentPage
    }
  },
  computed: {
    // 计算要显示的页码
    displayPages() {
      const pages = [];
      const half = Math.floor(this.maxVisible / 2);
      
      let start = Math.max(2, this.currentPage - half);
      let end = Math.min(this.totalPages - 1, this.currentPage + half);
      
      // 调整范围以确保显示 maxVisible 个页码
      if (end - start + 1 < this.maxVisible) {
        if (start === 2) {
          end = Math.min(this.totalPages - 1, start + this.maxVisible - 1);
        } else if (end === this.totalPages - 1) {
          start = Math.max(2, end - this.maxVisible + 1);
        }
      }
      
      for (let i = start; i <= end; i++) {
        pages.push(i);
      }
      
      return pages;
    },
    
    showFirstPage() {
      return this.totalPages > 1;
    },
    
    showLastPage() {
      return this.totalPages > 1 && !this.displayPages.includes(this.totalPages);
    },
    
    showStartDots() {
      return this.displayPages.length > 0 && this.displayPages[0] > 2;
    },
    
    showEndDots() {
      return this.displayPages.length > 0 && 
             this.displayPages[this.displayPages.length - 1] < this.totalPages - 1;
    }
  },
  watch: {
    currentPage(val) {
      this.jumpPage = val;
    }
  },
  methods: {
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
        this.$emit('page-change', page);
      }
    },
    
    jumpToPage() {
      if (this.jumpPage >= 1 && this.jumpPage <= this.totalPages) {
        this.goToPage(this.jumpPage);
      }
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.page-btn,
.page-number {
  padding: 0.5rem 0.75rem;
  border: 1px solid #5a5f7a;
  background: #363a4f;
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 38px;
  justify-content: center;
}

.page-btn:hover:not(:disabled),
.page-number:hover:not(.active) {
  background: #424549;
  border-color: var(--color-primary);
  color: var(--color-primary-light);
  transform: translateY(-2px);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-number.active {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(92, 225, 255, 0.3);
}

.dots {
  color: var(--text-secondary);
  padding: 0 0.25rem;
  font-weight: 600;
}

.page-jumper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.page-jumper input {
  width: 50px;
  padding: 0.4rem;
  border: 1px solid #5a5f7a;
  background: #363a4f;
  color: var(--text-primary);
  border-radius: 4px;
  text-align: center;
  font-size: 0.85rem;
}

.page-jumper input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(92, 225, 255, 0.1);
}

/* 移除数字输入框的箭头 */
.page-jumper input::-webkit-outer-spin-button,
.page-jumper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.page-jumper input[type=number] {
  -moz-appearance: textfield;
}

@media (max-width: 768px) {
  .pagination {
    gap: 0.3rem;
  }
  
  .btn-text {
    display: none;
  }
  
  .page-btn,
  .page-number {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    min-width: 32px;
  }
  
  .page-jumper {
    margin-left: 0.5rem;
    font-size: 0.75rem;
  }
  
  .page-jumper input {
    width: 40px;
    padding: 0.3rem;
  }
}
</style>

